<template>
  <div class="q-pa-md">
    <!-- 欢迎部分 -->
    <section class="hero-section q-mb-xl animate-fade-in">
      <q-parallax
        :height="300"
        src="/pic/1.jpg"
      >
        <div class="absolute-center text-center">
          <div class="text-h2 text-white text-weight-bold animate-slide-down">欢迎来到我的个人空间</div>
          <div class="text-h5 text-white q-mt-md animate-slide-up delay-1">分享技术，记录生活</div>
        </div>
      </q-parallax>
    </section>

    <!-- 个人照片展示 -->
    <section class="q-mb-xl animate-fade-in delay-2">
      <div class="text-h4 text-weight-bold q-mb-lg">照片墙</div>
      <q-carousel
        v-model="slide"
        transition-prev="slide-right"
        transition-next="slide-left"
        swipeable
        animated
        control-color="primary"
        navigation
        padding
        arrows
        height="400px"
        class="bg-grey-1 shadow-1 rounded-borders hover-lift"
      >
        <q-carousel-slide v-for="(photo, index) in photos" :key="index" :name="index" class="column no-wrap">
          <div class="row fit justify-center items-center q-gutter-md q-col-gutter no-wrap">
            <q-img
              class="rounded-borders"
              :src="photo"
              style="max-width: 100%; height: 340px; object-fit: contain;"
            />
          </div>
        </q-carousel-slide>
      </q-carousel>
    </section>

    <!-- 内容预览 -->
    <section class="row q-col-gutter-md q-mb-xl">
      <div class="col-12 col-md-6 animate-slide-right delay-3">
        <q-card class="content-preview-card hover-lift">
          <q-card-section>
            <div class="text-h6">最近文章</div>
          </q-card-section>

          <q-separator />

          <q-list>
            <q-item v-for="(article, idx) in latestArticles" :key="article.id" :to="`/articles/${article.id}`" clickable v-ripple :class="`animate-fade-in delay-${idx + 1}`">
              <q-item-section>
                <q-item-label>{{ article.title }}</q-item-label>
                <q-item-label caption>{{ article.date }} · {{ article.category }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <q-card-actions align="right">
            <q-btn flat color="primary" to="/articles" label="查看全部" class="animate-pulse" />
          </q-card-actions>
        </q-card>
      </div>

      <div class="col-12 col-md-6 animate-slide-left delay-3">
        <q-card class="content-preview-card hover-lift">
          <q-card-section>
            <div class="text-h6">精选项目</div>
          </q-card-section>

          <q-separator />

          <q-list>
            <q-item v-for="(project, idx) in featuredProjects" :key="project.id" clickable v-ripple :class="`animate-fade-in delay-${idx + 1}`">
              <q-item-section>
                <q-item-label>{{ project.title }}</q-item-label>
                <q-item-label caption lines="2">{{ project.description }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <q-card-actions align="right">
            <q-btn flat color="primary" to="/projects" label="查看全部" class="animate-pulse" />
          </q-card-actions>
        </q-card>
      </div>
    </section>

    <!-- 快速链接部分 -->
    <section class="q-mb-xl animate-fade-in delay-4">
      <div class="text-h4 text-weight-bold q-mb-lg">快速导航</div>
      <div class="row q-col-gutter-md justify-center">
        <div class="col-12 col-sm-6 col-md-3 animate-slide-up" :class="`delay-${index + 1}`" v-for="(link, index) in quickLinks" :key="link.title">
          <q-card class="quick-link-card text-center hover-lift" :to="link.route" clickable v-ripple>
            <q-card-section>
              <q-icon :name="link.icon" size="4rem" color="primary" class="animate-float" />
              <div class="text-h6 q-mt-sm">{{ link.title }}</div>
              <div class="text-caption q-mt-xs">{{ link.description }}</div>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const slide = ref(0)

const photos = ref([
  '/pic/1.jpg',
  '/pic/2.jpg',
  '/pic/3.jpg',
])

const latestArticles = ref([
  {
    id: 1,
    title: 'Vue 3 组合式 API 实践指南',
    date: '2024-03-15',
    category: '技术分享',
  },
  {
    id: 2,
    title: 'Quasar 框架开发体验',
    date: '2024-03-10',
    category: '技术分享',
  },
  {
    id: 3,
    title: '前端性能优化实践',
    date: '2024-03-05',
    category: '技术分享',
  }
])

const featuredProjects = ref([
  {
    id: 1,
    title: '个人网站',
    description: '基于 Vue 3 和 Quasar 框架开发的个人网站，展示个人信息、项目经历和技术博客。',
  },
  {
    id: 2,
    title: '在线商城系统',
    description: '电子商务平台，包含商品展示、购物车、订单管理等功能。',
  }
])

const quickLinks = [
  { 
    title: '个人简介',
    description: '了解我的技能和背景',
    icon: 'person',
    route: '/profile'
  },
  { 
    title: '项目经历',
    description: '查看我的项目作品',
    icon: 'work',
    route: '/projects'
  },
  { 
    title: '技术文章',
    description: '阅读我的技术分享',
    icon: 'article',
    route: '/articles'
  },
  { 
    title: '留言板',
    description: '与我交流互动',
    icon: 'message',
    route: '/message-board'
  }
]
</script>

<style scoped>
.hero-section {
  border-radius: 12px;
  overflow: hidden;
}

.content-preview-card, .quick-link-card {
  height: 100%;
  transition: all 0.3s;
}

.content-preview-card:hover, .quick-link-card:hover {
  transform: translateY(-5px);
}

.quick-link-card {
  border-top: 3px solid var(--q-primary);
}

.rounded-borders {
  border-radius: 12px !important;
}
</style> 